<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
	<title>用户管理-爱慈善</title>
	<!-- Favicon and Touch Icons -->
	<link href="common/favicon.png" rel="shortcut icon" type="image/png">
	<link rel="stylesheet" href="background/modules/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="background/modules/ionicons/css/ionicons.min.css">
	<link rel="stylesheet" href="background/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">

	<link rel="stylesheet" href="background/modules/flag-icon-css/css/flag-icon.min.css">
	<link rel="stylesheet" href="background/css/style.css">
	<link rel="stylesheet" href="common/css/glyphicon.css">
	<!--引入Jqgrid的核心CSS-->
	<link rel="stylesheet" href="common/grid/ui.jqgrid-bootstrap.css">
	<style>
		th{
			text-align: center;
		}
		#userList .success,#userList .active{
			background: #c9dcdd;
		}
	</style>
</head>

<body>
<div id="app">
	<div class="main-wrapper">
		<div class="navbar-bg"></div>
		<div th:replace="commons/admin-bar::navbar(currUri='admin-user')"></div>
		<div th:replace="commons/admin-bar::sidebar(currUri='admin-user')"></div>

		<div class="main-content">
			<section class="section">
				<h1 class="section-header">
					<div><i class="ion ion-person-stalker"></i> 用户管理</div>
				</h1>
				<div class="row">
					<div class="col-xs-12 col-sm-12 col-md-12">
						<div class="card mb-3">
							<div class="card-body">
								<!--定义jqgrid表格标签-->
								<table id="userList"></table>
								<!--定义分页栏标签-->
								<div id="pager"></div>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>
	</div>
</div>
<!--引入Jquery-->
<script src="common/js/jquery-3.4.1.js"></script>
<script src="background/modules/jquery.min.js"></script>
<script src="background/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="background/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="background/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
<script src="background/js/sa-functions.js"></script>
<script src="background/js/scripts.js"></script>
<!--引入jqgrid的核心JS-->
<script src="common/grid/jquery.jqGrid.min.js"></script>
<!--引入jqgrid的国际化JS-->
<script src="common/grid/grid.locale-cn.js"></script>
<script>
	$(function () {
		// 初始化表格
		$('#userList').jqGrid({
			url : "listUsers", // 获取数据的地址
			datatype : "json", // 服务器端返回的数据类型
			mtype : "GET", // ajax提交方式。POST或者GET，默认GET
			colNames : ["ID","昵称","密码","地址","邮箱","手机号","认证","职业","状态","角色"], // 列显示名称，是一个数组对象
			colModel : [
				{editable:false,align:"center",name:"id",sortable: false},
				{editable:true,align:"center",name:"name",sortable: false},
				{editable:true,align:"center",name:"password",search: false,sortable: false},
				{editable:false,align:"center",name:"address",search: false,sortable: false},
				{editable:true,align:"center",name:"email",sortable: false},
				{editable:true,align:"center",name:"phone",sortable: false},
				{editable:false,align:"center",name:"certification",search: false,sortable: false,
					formatter:function(cellvalue, options, rowObject){
						return "<font color='blue'>" + cellvalue +"</font>";
					}},
				{editable:false,align:"center",name:"career",search: false,sortable: false},
				{editable:true,align:"center",name:"status",search: false,sortable: false,
					width:100,
					edittype:"select",
					editoptions: {
						value : "0:正常;1:封禁"
					}, formatter:function(cellvalue, options, rowObject){
						if (cellvalue != '正常'){
							return "<font color='red'>" + cellvalue +"</font>";
						}else {
							return "<font color='green'>" + cellvalue +"</font>";
						}
					}},
				{editable:true,align:"center",name:"role",search: false,sortable: false,
					width:100,
					edittype:"select",
					editoptions: {
						value : "0:普通用户;1:管理员"
					}, formatter:function(cellvalue, options, rowObject){
						if (cellvalue != '管理员'){
							return "<font color='gray'>" + cellvalue +"</font>";
						}else {
							return "<font color='orange'>" + cellvalue +"</font>";
						}
					}},
			], // 与上面的属性必须成对出现
			pager : "#pager", // 定义分页工具栏
			viewrecords : true, // 展示总条数
			rowNum : 10, // 每页展示的条数,默认20
			rowList : [5,10,25,50,100,], // 显示下拉列表供用户自定义显示每页条数
			styleUI : "Bootstrap", // 指定主题样式
			hidegrid : false, // 禁用标题旁边的折叠按钮
			autowidth : true, // 自适应父容器的宽度,铺满屏幕
			height : 500, // 指定高度,单位px
			page : 1, // 初始页码
			pagerpos : "center", // 指定分页工具栏的位置,默认center
			editurl : "editUser" // 编辑的URL
		}).navGrid(
				/*
                    快速加入编辑功能
                 */
				// 参数1: 将快速编辑放入哪个位置
				"#pager",
				// 参数2: 展示编辑的配置对象
				{add:false,edit:true,del:true,search:true,refresh:true},
				// 参数3: 编辑面板的配置
				{reloadAfterSubmit: true,closeAfterEdit: true},
				// 参数4: 添加面板的配置
				{reloadAfterSubmit: true,closeAfterAdd: true},
				// 参数5: 删除面板的配置
				{reloadAfterSubmit: true,closeAfterDelete: true},
				// 参数6: 搜索面板的配置
				{reloadAfterSubmit: true,closeAfterSearch: true,sopt:['eq']},
				// 参数7: 刷新的配置
				{},
		);
	});
</script>

</body>
</html>
